<template>
  <div id="seek">
    <el-page-header @back="goBack" content="求购商品" style="margin-bottom: 20px" ></el-page-header>
    <div class="head">在这里，留言写下您想要的宝贝</div>
    <div class="top">
      <img src="~@/images/seek/seek.png" alt="" style="margin: 20px 0"><br>
      <!-- <span>商品名称：</span><el-input placeholder="请输入商品名称" v-model="goodsWantName" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span>商品成色：</span><el-input placeholder="请输入商品成色" v-model="goodsWantLevel" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span style="margin-left: -355px">商品类型：</span><el-select v-model="goodsWantId" placeholder="请选择商品类型">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select><br><br>
      <span style="margin-left: -392px">商品数量：</span><el-input-number v-model="goodsWantCount" :min="1"></el-input-number><br><br>
      <span>期望价格：</span><el-input placeholder="请输入期望价格" v-model="goodsWantPrice" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span style="vertical-align: top">期望描述：</span><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入期望描述" 
                                v-model="goodsWantInfo" clearable style="display: inline-block; width: 30%;"></el-input><br><br> -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称：" prop="goodsWantName">
          <el-input v-model="ruleForm.goodsWantName"></el-input>
        </el-form-item>
        <el-form-item label="商品成色：" prop='goodsWantLevel'>
          <!-- <el-input v-model="ruleForm.goodsWantLevel"></el-input> -->
          <el-select v-model="ruleForm.goodsWantLevel" placeholder="请选择商品成色" class="left" style="width: 65px">
            <el-option v-for="item in optionsLevel" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型：" prop='sortId'>
          <el-select v-model="ruleForm.sortId" placeholder="请选择商品类型" class="left" style="width: 110px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品数量：">
            <el-input-number v-model="ruleForm.goodsWantCount" :min="1" class="left"></el-input-number>
        </el-form-item>
        <el-form-item label="期望价格：" prop="goodsWantPrice">
          <el-input v-model.number="ruleForm.goodsWantPrice"></el-input>
        </el-form-item>
        <el-form-item label="宝贝介绍：" prop="goodsWantInfo">
          <el-input type="textarea" v-model="ruleForm.goodsWantInfo"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- <div class="bottom">
      <img src="~@/images/seek/seek2.png" alt="" style="margin: 20px 0"><br>
      <span>买家姓名：</span><el-input placeholder="请输入买家姓名" v-model="inputName" clearable style="display: inline-block; width: 30%"></el-input><br><br>
      <span>联系方式：</span><el-input placeholder="请输入买家联系方式" v-model="inputContact" clearable style="display: inline-block; width: 30%"></el-input><br><br> -->
      <!-- <span>买家地址：</span><el-input placeholder="请输入买家地址" v-model="inputAddress" clearable style="display: inline-block; width: 30%"></el-input><br><br> -->
    <!-- </div> -->

    <el-button type="primary" round size='medium' native-type='button' @click="seekClick">求购商品</el-button>
  </div>
</template>

<script>
import {request} from '@/network/request'

export default {
  data() {
    return {
      options: [
        {value: '1', label: '电子产品'}, {value: '2', label: '男装服饰'}, {value: '3', label: '女装服饰'}, {value: '4', label: '家电产品'}, 
        {value: '5', label: '图书音像'}, {value: '6', label: '零食水果'}, {value: '7', label: '美妆彩妆'}
      ],
      optionsLevel: [
        {value: '1', label: '一'}, {value: '2', label: '二'}, {value: '3', label: '三'}, {value: '4', label: '四'}, {value: '5', label: '五'}, 
        {value: '6', label: '六'}, {value: '7', label: '七'}, {value: '8', label: '八'}, {value: '9', label: '九'}, {value: '10', label: '十'}
      ],
      ruleForm: {
        goodsWantName: '',
        goodsWantLevel: '10',
        sortId: '1',
        goodsWantCount: '1',
        goodsWantPrice: '',
        goodsWantInfo: '',
        // goodsWantImage: '',
        // inputName: '',
        // inputContact: '',
        // inputAddress: '',
        // inputPromise: ''
      },
      // goodsWantName: '',
      // goodsWantLevel: '',
      // goodsWantId: '',
      // goodsWantCount: '',
      // goodsWantPrice: '',
      // goodsWantInfo: '',
      // inputName: '',
      // inputContact: '',
      
      // inputAddress: ''
      rules: {
        goodsWantName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goodsWantLevel: [
          { required: true, trigger: 'blur' }
        ],
        sortId: [
          { required: true, trigger: 'blur' }
        ],
        goodsWantPrice: [
          { required: true, message: '请输入期望价格', trigger: 'blur' },
          { type: 'number', message: '期望价格必须是数字值' }
        ],
        goodsWantInfo: [
          { required: true, message: '请输入宝贝描述', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    seekClick() {
      // 点击求购商品按钮，向服务器发送请求
      // request({
      //   url: '/goods-want/releaseGoodsWant',
      //   method: 'post'
      // }).then(res => {
        
      // }).catch(err => {
      //   console.log(err);
      // });
      // 点击发布商品按钮，向服务器发送请求
      let user = {
        goodsWantName: this.ruleForm.goodsWantName,
        goodsWantLevel: +this.ruleForm.goodsWantLevel,
        sortId: +this.ruleForm.sortId,
        goodsWantCount: this.ruleForm.goodsWantCount,
        goodsWantPrice: +this.ruleForm.goodsWantPrice,
        goodsWantInfo: this.ruleForm.goodsWantInfo,
        // goodsWantImage: this.ruleForm.goodsWantImage,
        userId: this.$store.state.userId,
        goodsWant: 'w'
      }
      // 判断信息是否填写完整
      if (!this.ruleForm.goodsWantName || !this.ruleForm.goodsWantPrice || !this.ruleForm.goodsWantInfo) {
        this.$message({
          message: '请完善商品信息！',
          type: 'warning'
        })
      } else {
        request({
          url: '/goods-want/releaseGoodsWant',
          method: 'post',
          data: user
        }).then(res => {
          if(res.data.flag) {
            this.$message({
              message: '发布求购成功！',
              type: 'success'
            })
            // 发布商品成功后跳转到对应商品详情页面
            this.$store.commit('changeGoodsId', res.data.data.goodsWantId)
            this.$store.commit('changeGoodsWantDetail', 'w')
            this.$router.push('/goodsDetail')
          }
        }).catch(err => {
          console.log(err);
        });
      }
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
 #seek {
   /* height: 1000px; */
   text-align: center;
   background-color: #fff;
   padding-bottom: 20px;
 }

  #seek .head {
    background-color: #fff8f0;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  #seek .top {
    /* border: 1px solid #cccccc; */
    padding-top: 10px;
  }

  /* #seek .bottom {
    border: 1px solid #cccccc;
    margin: 20px 0;
    padding-top: 10px;
  } */

  #seek .top .el-form-item {
    width: 40%;
    margin: 30px auto;
  }

  #seek .top .left {
    float: left;
    /* text-align: center; */
  }
</style>